<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>滚动消息</header>
        <div class="ui_page_bd">
          <p class="ui_con_block">
              动态消息滚动。
          </p>
          <!-- /// [htmldemo] -->
            <p class="p20 f20">
                marquee 纵向运动
            </p>
            <div class="ui_marquee_box">
                <ul class="ui_marquee" id="j_marquee">
                    
                </ul>
            </div>            
            <p class="p20 f20">
                marquee 横向运动
            </p>
            <div class="ui_marquee_box"  id="j-marquee-x-box">
              <div class="ui_marquee_row">                  
                  <ul class="ui_marquee ui_marquee_row_content" id="j-marquee-x">
                      <li class="ui_marquee_item f17">你双颊上的道理</li>
                      <li class="ui_marquee_item f17">是人们的爱情</li>
                      <li class="ui_marquee_item f17">撒向天空的一个星</li>
                      <li class="ui_marquee_item f17">变幻出生命的颜色</li>
                      <li class="ui_marquee_item f17">我跟着人们跳跃的心</li>
                      <li class="ui_marquee_item f17">太阳也不必再为我迟疑</li>
                      <li class="ui_marquee_item f17">记录着生命的凭证</li>
                      <li class="ui_marquee_item f17">像飞在天空没有羁绊的云</li>
                  </ul>
              </div>
            </div>
            <!-- /// [htmldemo] -->
        </div>
    </div>

<!--公共js-->
<script type="text/javascript" src="js/lui.js"></script>
<script type="text/javascript">
    ///[jsdemo]
    var arr = [
      '1、标准化，产品化',
      '2、更多复用，更快效率',
      '3、多人协作，更加统一',
      '​4、维护方便',
      '​​5、易于使用',
      '6、减少UI设计时间']
    function renderHtml(){            
      var j_marquee = lui.selector('#j_marquee');   
      var li = ''
      for (var index = 0; index < arr.length; index++) {
        li += '<li class="ui_marquee_item f17">' + arr[index] + '</li>'
      }      
      li+= '<li class="ui_marquee_item f17">' + arr[0] + '</li>'  //拷贝第一个数据放在最后，保证无缝滚动
      j_marquee.innerHTML = li
    }
    renderHtml()

    var marqueeUp = lui.marqueeUp({el: '#j_marquee', height:24, size:arr.length})
    marqueeUp.start()
    
    var marquee = lui.marquee({container:'#j-marquee-x-box', listEl: '#j-marquee-x'})
    marquee.start()
    ///[jsdemo]
</script>
</body>
</html>
